<template>
  <div class="payment_index">
    <div class="payment_index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">待支付<i class="el-icon-close"></i></div>
    </div>
    <div class="payment_index_bottom">
      <div class="payment_index_bottom_new">
        <div class="payment_index_bottom_new_goods">
          <div class="payment_index_bottom_new_goods_btn">
          </div>
          <div class="payment_index_bottom_new_goods_screening">
            <div class="payment_index_bottom_new_goods_screening_left">
              <i>下单时间</i>
              <el-date-picker v-model="valueTime"
                              type="daterange"
								              @change="selectTime"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              align="right">
              </el-date-picker>
            </div>
            <div class="payment_index_bottom_new_goods_screening_right">
              <el-input v-model="input"
                        placeholder="请输入订单信息查询"></el-input>
              <button @click="searchList"><i class="el-icon-search"></i>搜索</button>
            </div>
          </div>
        </div>
      </div>
      <div class="payment_index_bottom_table_box">
        <div class="payment_index_bottom_table">
          <table>
            <tr>
              <th>订单号</th>
              <th>下单时间</th>
              <th>下单人</th>
              <th>手机号</th>
              <th>商品数量</th>
              <th>总价</th>
              <th>待付定金</th>
              <th>配送</th>
              <th>操作</th>
            </tr>
            <tr v-for="(v,i) in tableList"
                :key="i">
              <td>{{v.order_code}}</td>
              <td>{{v.create_time | dateformat('YYYY-MM-DD HH:mm:ss')}}</td>
              <td>{{v.username}}</td>
              <td>{{v.mobile}}</td>
              <td>{{v.num}}</td>
              <td>{{v.price}}</td>
              <td>{{v.deposit_price}}</td>
              <td>{{v.move_way=='1'?'快递':v.move_way=='2'?'自提':''}}</td>
              <td>
                <button class="editor"
                        @click='_toShopInfo(v.id)'>详情</button>
                <button class="shelves" @click="toCloseOrder(v.id)">取消订单</button>
                <!-- <button class="delete">关闭订单</button> -->
              </td>
            </tr>
            <tr v-if="tableList.length == 0">
              <td class="table_title"
                  colspan="8">当前数据空空如也</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="payment_index_bottom_page">
      <div class="payment_index_bottom_page_left">
      </div>
      <div class="payment_index_bottom_page_right">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="page"
                       :page-sizes="[10, 20, 30, 40]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total"
                       background>
        </el-pagination>
      </div>
    </div>
  </div>
</template>
	
	<script>
  import util from '@/uitls/util';
export default {
  data () {
    return {
      input: '',
      checkAll: false,
      currentPage4: 1,
      checkBoxAll: [],				// 选中的数据
      page: 1,
      pagesize: 10,
      total: 0,
      tableList: [],
      sid:null,
      valueTime:[],
      startDate:'',
      endDate:''
    }
  },
  mounted () {
    this.sid = localStorage.getItem('sid')
    console.log(this.sid);
    this._getOrdersList()
   
  },
  methods: {
    // 关闭订单按钮
    toCloseOrder(order_id){
        this.$confirm('确定要关闭此订单吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
				}).then(()=>{
					let params = {
						order_id,
						// store_id:this.sid
					}
					this.$http.post('/api/root/packOrder/cancel',params).then(res=>{
						console.log(res,'关闭结果');
						if(res.code==1){
							this.$message.success('关闭成功')
              this._getOrdersList()
						}else{
							this.$message.warning(res.msg)
						}
					})
				}).catch(()=>{})
    },

    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this._getOrdersList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.page = val
      this._getOrdersList()
    },
    hangerInto () {
      this.$router.push({ path: '/paymentDetails' });
    },
    // 获取待发货订单
    _getOrdersList () {
      let params = {
					order_status:1,
					page:this.page,
					pagesize:this.pagesize,
					keyword:this.input,
					start_date:this.startDate,
					end_date:this.endDate
				}
      this.$http.post("/api/root/PackOrder/lst", params).then(res => {
        console.log(res, 123);
        if (res.code == 1) {
          this.tableList = res.data.data ? res.data.data : [];
          this.total = res.data.count;  //总条数
        }
      })
    },

    // 搜索按钮
			searchList(){
				this._getOrdersList()
			},

			// 时间选择
			selectTime(e){
				console.log(e,'时间');
				if(e){
					this.startDate = this.$moment(e[0]).format('yyyy-MM-DD')
					this.endDate = this.$moment(e[1]).format('yyyy-MM-DD')
				}else{
					this.startDate = ''
					this.endDate = ''
				}
				this._getOrdersList()
			},

    //点击详情跳转
    _toShopInfo (order_id) {
      this.$router.push({ path: `/paymentDetails?order_id=${order_id}` })
    }
  },
}
	</script>


<style lang="less" scoped="scoped">
@import "index.less";
</style>
